import { useUserStore } from "@/stores/user";
import type { Directive, DirectiveBinding } from "vue";

// 自定义指令
export const focus: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    console.log(">>>>>>>>" + el);
    el.focus();
  },
};

export const color: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    el.style.color = binding.value;
  },
  updated(el: HTMLElement, binding: DirectiveBinding<string>) {
    el.style.color = binding.value;
  },
};

// 管理员权限特殊处理
const adminPerms = "*:*:*";
export const auth: Directive = {
  mounted(el: HTMLElement, binding: DirectiveBinding<string>) {
    const store = useUserStore();
    const permissions = store.profile.permissions;
    if (permissions.includes(adminPerms)) {
      return;
    }
    if (!permissions.includes(binding.value)) {
      el.remove();
    }
  },
};
